<template>
    <div>
        <common-banner name="新闻中心" en-name="News Center"></common-banner>
        <div class="page-center">
            <p class="keyword mt-20">
                全部搜索结果>“<span>{{ keyword }}</span
                >”，共{{ total }}条结果
            </p>
            <div class="mt-20 mb-20">
                <div class="news-pc">
                    <common-news :list="newsList"></common-news>
                    <el-pagination background layout="prev, pager, next" :total="100" class="mb-20"></el-pagination>
                </div>
                <div class="news-mobile">
                    <ul class="news-list mt-20 mb-20">
                        <li class="news-item" v-for="item in newsList" :key="item.articleId">
                            <div class="title">
                                <a :href="`/news-detail?id=${item.articleId}`">{{ item.title }}</a>
                                <span>{{ getDatePart(item.date)[0] }}-{{ getDatePart(item.date)[1] }}</span>
                            </div>
                        </li>
                    </ul>
                    <el-pagination background layout="prev, pager, next" :total="100"></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import router from '@/router/index'
import CommonBanner from '@/components/CommonBanner.vue'
import CommonNews from '@/components/CommonNews.vue'

const { keyword } = router.currentRoute.query

// TODO从接口中获取
const newsList = ref([
    {
        title: 'E7E16|菲斯生物邀您共聚CPHI & PMEC China 2024',
        date: '2024-06-19',
        articleId: 1,
    },
    {
        title: '浅谈药物杂质标准品定量研究方法之定量核磁',
        date: '2024-06-07',
        articleId: 2,
    },
    {
        title: '6月SINCO最新入库杂质对照品，现货等您来选！',
        date: '2024-06-05',
        articleId: 3,
    },
])
const total = ref(1000)
if (keyword) {
    // TODO从接口中获取
    document.title = `文章查询${keyword}`
}
const getDatePart = (dateString) => {
    const parts = dateString.split('-')
    return parts
}
</script>
<style lang="scss" scoped>
.keyword {
    color: #5a5a5a;
    font-family: arial;
    font-size: 12px;
    height: 28px;
    line-height: 28px;
    background-color: #eeeeee;
    font-weight: normal;
    text-decoration: none;
    text-align: left;
    margin-bottom: 3px;
    display: block;

    span {
        color: red;
    }
}

.news-pc {
    display: block;
}
.news-mobile {
    display: none;
}

@media (max-width: 768px) {
    .page-center {
        width: auto !important;
    }
    .breadcrumb {
        margin-left: 10px;
    }

    .news-mobile {
        display: block;
    }
    .news-pc {
        display: none;
    }

    .el-pagination {
        width: 98%;
        margin: 0 auto;
        margin-bottom: 20px;
    }
}

.news-list {
    .news-item {
        list-style: none;
        border-bottom: 1px dotted #dbd4cd;
        margin: 20px 10px;
        display: flex;

        .date-container {
            width: 80px;
            height: 80px;
            background-color: #09aed4;
            text-align: center;
            color: #fff;
            margin-bottom: 12px;
            margin-left: 30px;
            .day {
                padding-top: 20px;
                font-size: 24px;
            }
        }

        .title {
            font-size: 16px;
            font-weight: bold;
            padding-bottom: 10px;

            a {
                padding-bottom: 6px;
                text-decoration: none;
                &:hover {
                    color: #09aed4;
                }
                &:visited {
                    color: initial;
                }

                display: block;
                width: 90%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                color: #666666 !important;
            }

            span {
                font-weight: normal;
                line-height: 1.5;
                color: #929292;
            }
        }
    }
}
</style>
